<html>

<head>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
    crossorigin="anonymous">

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>

  <script src="/static/js/auth.js"></script>
</head>

<body style="width:100%;height:100%">
  <div style="width:100%;height:100%;margin:0 0 10px 0;text-align: center;">
    <div style="font-size:20px;font-weight:bold;
                margin:0;background: rgb(195, 228, 250);height:32px;">
      HomePage of Clouddisk
    </div>
    <table style="height:100%;width:100%;text-align: left;border-width: 2px; border-color: lightslategrey;">
      <tbody>
        <tr style="margin-bottom: 20px;">
          <td style="width:20%;height: 100%;background: lightsteelblue;">
            <div style="text-align: top;height:20%;margin: 10px 0 0 10px;">
              <img style="width:80px;height:80px;" src="/static/img/avatar.jpeg"></img><br>
              username: <p id="username" style="color: seagreen"></p>
              signuptime: <p id="regtime" style="color: seagreen"></p>
            </div>
            <div style="height: 80%;"></div>
          </td>
          <td style="width: 3px;height:100%;">
            <div style="width:100%;height: 100%;background:rgb(202, 157, 248);"></div>
          </td>
          <td style="text-align: top;">
            <div> filelist
              <button class="btn btn-success" onclick="toUploadFile()" style="float: right;margin-right: 30px;">upload file
              </button>
              <div style="width:100%;height: 1px;background:rgb(202, 157, 248);margin-top: 15px;"></div>
            </div>
            <div style="height:95%;" style="width:100%;">
              <table id="filetbl" style="margin-left:3%;width:96%;">
                <thead style="height:50px;border:1px;">
                  <tr style="height:50px;border:1px;">
                    <th>filehash</th>
                    <th>filename</th>
                    <th>filesize</th>
                    <th>updatetime</th>
                    <th>lastupdate</th>
                    <th>operation</th>
                  </tr>
                </thead>
              </table>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

<script lang="javascript">
  window.onload = function () {
    // 检查 Token
    if (!localStorage.getItem("token")) {
      window.location.href = '/static/view/signin.html';
      return;
    }
    // 获取用户信息
    getUserInfo();
  }

  function setAuthHeader(xhr) {
    var token = localStorage.getItem("token");
    if (token) {
      xhr.setRequestHeader("Authorization", "Bearer " + token);
    }
  }

  function getUserInfo() {
    $.ajax({
      url: "/user/info",
      type: "GET",
      beforeSend: setAuthHeader,
      dataType: "json", // 明确告诉 jQuery 我们期望接收 JSON
      success: function (resp) { // 'resp' 已经是解析好的 JS 对象了
        // --- 修正：直接使用 resp 对象，并注意后端返回的键名大小写 ---
        document.getElementById("username").innerHTML = resp.data.username;
        document.getElementById("regtime").innerHTML = resp.data.signup_at;
        // 成功获取用户信息后，再加载文件列表
        updateFileList();
      },
      error: function () {
        alert("获取用户信息失败，请重新登录。");
        window.location.href = '/static/view/signin.html';
      }
    });
  }

  function updateFileList() {
    $.ajax({
      url: "/file/query",
      type: "POST",
      contentType: "application/json; charset=utf-8",
      data: JSON.stringify({ limit: 100 }),
      beforeSend: setAuthHeader,
      dataType: "json",
      success: function (resp) { // 'resp' 已经是解析好的 JS 对象了
        // --- 修正：直接使用 resp 对象 ---
        var data = resp.data;
        $("#filetbl tr:gt(0)").remove(); // 清空旧列表
        
        if (!data || data.length === 0) return;

        for (var i = 0; i < data.length; i++) {
          var x = document.getElementById('filetbl').insertRow();
          var cell;
          cell = x.insertCell();
          cell.innerHTML = data[i].hash.substr(0, 20) + "...";
          cell = x.insertCell();
          cell.innerHTML = data[i].filename;
          cell = x.insertCell();
          cell.innerHTML = data[i].size;
          cell = x.insertCell();
          cell.innerHTML = data[i].created_at;
          cell = x.insertCell();
          cell.innerHTML = data[i].last_update;
          cell = x.insertCell();
          cell.innerHTML = `<button class="btn btn-success btn-xs" onClick="downloadFile('${data[i].hash}', '${data[i].filename}')">download</button>
                          <button class="btn btn-danger btn-xs" style="margin-left: 5px;" onClick="deleteFile(${data[i].id}, '${data[i].filename}')">delete</button>`;
        }
      },
      error: function () {
        alert("获取文件列表失败！");
      }
    });
  }

  /**
   * 跳转到上传页面（保持您原有的逻辑）
   */
  function toUploadFile() {
    // 您可以继续使用独立的上传页面，或者像我之前建议的那样在主页集成上传功能
    window.location.href = '/static/view/upload.html';
  }

  /**
   * 下载文件（已重构为正确、可靠的方式）
   */
  function downloadFile(filehash, filename) {
    var token = localStorage.getItem("token");
    var downloadUrl = `/file/download/${filehash}`; // 下载链接现在更简洁

    // 使用 fetch API 来发送带授权头的 GET 请求
    fetch(downloadUrl, {
      method: 'GET',
      headers: {
        'Authorization': 'Bearer ' + token
      }
    })
    .then(res => {
        if (!res.ok) {
            throw new Error('网络响应错误');
        }
        return res.blob(); // 将响应体转换为 Blob 对象
    })
    .then(blob => {
        // 创建一个临时的 URL 指向这个 Blob 对象
        const blobUrl = window.URL.createObjectURL(blob);
        // 创建一个隐藏的 <a> 标签来触发下载
        const a = document.createElement('a');
        a.href = blobUrl;
        a.download = filename; // 设置浏览器下载时显示的文件名
        document.body.appendChild(a);
        a.click(); // 模拟点击
        document.body.removeChild(a); // 点击后移除
        window.URL.revokeObjectURL(blobUrl); // 释放 Blob URL
    })
    .catch(err => {
        alert("下载失败: " + err.message);
    });
  }

  /**
   * 删除文件（新增的功能）
   */
  function deleteFile(fileId, filename) {
    if (!confirm(`您确定要删除文件 "${filename}" 吗？`)) {
        return;
    }

    $.ajax({
        url: "/file/delete",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ id: fileId }),
        beforeSend: setAuthHeader,
        success: function(response) {
            alert("文件删除成功！");
            updateFileList(); // 删除成功后刷新列表
        },
        error: function(jqXHR) {
            alert("删除失败: " + (jqXHR.responseJSON ? jqXHR.responseJSON.data : "未知错误"));
        }
    });
  }

</script>
</html>

